<template>
  <div>
    <div>
      <a-form-model layout="inline" :model="formInline">
        <a-form-model-item>
          <a-input v-model="formInline.name" placeholder="输入部门名称"></a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-input
            v-model="formInline.phone"
            type="text"
            placeholder="输入部门代码"
          ></a-input>
        </a-form-model-item>

        <a-form-model-item>
          <a-button type="primary" @click="search">搜索</a-button>
          <a-button type="primary" @click="add">添加</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-table
      :columns="columns"
      :data-source="student"
      :pagination="{ total: student.length, defaultPageSize: 5 }"
      bordered
    >
      <!-- 插槽：显示时间 -->
      <template slot="created_at" slot-scope="props">
        <p>{{ props | timeFilter }}</p>
      </template>
      <!-- 插槽：异步操作：查看详情页、删除 -->
      <!-- record代表这一行数据 -->
      <template slot="action" slot-scope="text, record">
        <div class="action_container">
          <van-button type="danger" @click="onClickDelete(record)">删除</van-button>

          <!-- 编辑 -->
          <van-button type="danger" @click="onClickEdit(record)">编辑</van-button>
        </div>
      </template>
    </a-table>

    <!-- 编辑框 -->
    <div>
      <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
        <a-form-model
          ref="ruleForm"
          :model="message"
          :rules="rules"
          v-bind="layout"
        >
          <!-- 用户名修改 -->
          <a-form-model-item has-feedback label="部门名称">
            <a-input v-model="message.name" type="text" autocomplete="off" />
          </a-form-model-item>

          <a-form-model-item has-feedback label="部门代码">
            <a-input v-model="message.id" type="text" autocomplete="off" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
    <!-- 编辑弹出框 -->
  </div>
</template>
<script>
export default {
  data() {
    return {

      visible: false,
      //编辑弹窗是否出现
      message: {
        id: 0,
        name: "",
        mobile: "",
      },
      //保存要编辑的id和名字

      student: [],
      copylist: [],

      // 表格的设置
      columns: [
        {
          title: "姓名",
          dataIndex: "nickname",
        },
        {
          title: "UID",
          dataIndex: "uid",
        },
         {
          title: "用户地址",
          dataIndex: "mobile",
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
          scopedSlots: { customRender: "created_at" },
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      formInline: {
        name: "",
        phone: "",
        status: "",
      },
    };
  },
  mounted() {
    this.getstu();
  },
  filters: {
    timeFilter(value) {
      var date = new Date(value * 1000);
      var str = `${date.getHours()}时${date.getMinutes()}分${date.getUTCSeconds()}分，${date.getFullYear()}年`;
      return str;
    },
  },
  methods: {
    getstu() {
      this.$axios.get("/list.json").then((res) => {
        console.log(res);
        this.student = res.data;
        this.copylist = res.data;
      });
    },
    
    // 添加
    add(){
      this.student.push({
        formInline:name,
        formInline:phone,
      })
    },
    // 删除每一条数据
    onClickDelete(record) {
      this.copylist.forEach((item, index) => {
        if (item.uid == record.uid) {
          this.copylist.splice(index, 1);
        }
      });
    },

    confirm(e) {
      console.log(e);
      this.$message.success("Click on Yes");
    },
    cancel(e) {
      console.log(e);
      this.$message.error("Click on No");
    },

    search() {
      var res = [];
      if (this.formInline.status == "") {
        res = this.copylist.filter((item) => {
          return (
            item.nickname.includes(this.formInline.name) &&
            item.mobile.includes(this.formInline.phone)
          );
        });
      } else {
        res = this.copylist.filter((item) => {
          return (
            item.status == this.formInline.status &&
            item.nickname.includes(this.formInline.name) &&
            item.mobile.includes(this.formInline.phone)
          );
        });
      }
      this.student = res;
    },

    onClickEdit(record) {
      this.visible = true;
      this.message.name = record.nickname;
      this.message.mobile = record.mobile;
      this.message.id = record.uid;
    },
    //点击编辑按钮 显示弹窗并把要编辑的姓名传到message中，message是要显示在弹窗里的内容

    handleOk(e) {
      console.log(e);
      this.visible = false;
      this.student.forEach((item) => {
        if (item.uid == this.message.id) {
          item.nickname = this.message.name;
          item.mobile = this.message.mobile;
        }
      });
    },
    //点击编辑弹窗里的确认的时候，看哪个是当前点击的，修改表格里的名字
  },
};
</script>
<style scoped>
img {
  width: 40px;
  height: 40px;
}

.action_container {
  width: 80px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
</style>
